<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Shopping Cart</title>
  <script src="./js/libs/jquery.min.js"></script>
  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
  <script src="./bootstrap/jquery-3.4.1.slim.min.js"></script>
  <script src="./bootstrap/popper.min.js"></script>
  <script src="./bootstrap/js/bootstrap.min.js"></script>
  <script src="./fontawesome/all.min.js"></script>
  <link rel="stylesheet" href="./fontawesome/all.min.css" />
  <link rel="stylesheet" href="./fontawesome/fontawesome.min.css" />
  <link rel="stylesheet" href="./css/style.css" />
  <script src="./js/libs/jquery-3.5.1.js"></script>
</head>

<body onload="foo()">
  <header>
    <div class="menu-btn"><i class="fas fa-bars"></i></div>
    <div class="cart">
      <a href="#"><i class="fas fa-cart-plus"></i></a>
    </div>
    <!-- navbar of the web page -->
    <nav id="my-nav">
      <!-- Brand Logo -->
      <div class="logo">
        <a href="#"><img src="./images/dotstore.png" alt="logo" /></a>
      </div>
      <!-- Brand Logo End -->
      <!-- Search Bar -->
      <div class="s-block">
        <div class="input-group mb-3 search">
          <input type="text" class="form-control search-bar" placeholder="Search Here..." />
        </div>
        <button class="search-btn" type="button">
          <i class="fas fa-search"></i>
        </button>
      </div>
      <!-- Search Bar End -->
      <!-- right menu -->
      <ul class="right-menu">
        <li class="link">
          <a href="./views/loginPage.html">Log In <i class="fas fa-sign-in-alt"></i></a>
        </li>
        <li class="link">
          <a href="./views/signUpPage.html">Sign Up <i class="fas fa-user-plus"></i></a>
        </li>
        <li class="link">
          <a href="#"><i class="fas fa-cart-plus"></i></a>
        </li>
      </ul>
      <!-- right menu end -->
    </nav>

    <!-- Header block end -->
    <div class="container-fluid details-block show">
      <div class="log-sign">
        <li class="link">
          <a href="./views/loginPage.html">Log In <i class="fas fa-sign-in-alt"></i></a>
          /
          <a href="./views/signUpPage.html">Sign Up <i class="fas fa-user-plus"></i></a>
        </li>
      </div>
      <li><a href="#" onclick="cl()">Men's</a></li>
      <li><a href="#" onclick="cl()">Women's</a></li>
      <li><a href="#" onclick="cl()">Kid's</a></li>
      <li><a href="#" onclick="cl()">Mobile's</a></li>
      <li><a href="./assets/aboutus.html">About</a></li>
    </div>
  </header>
  <!--Script files -->
  <main>
    <!-- Slide Images Block -->

    <div class="container slideImg">
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators"></ol>
        <div class="carousel-inner slide-images"></div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- Slide Images Block End -->
    <!-- sample men's cloths  -->
    <section class="container-fluid main-product" onload="foo()">
      <div class="men-head">
        <h2>Men's Wear</h2>

        <div class="show-more" onclick="cl()">
          <a href="#">Show More <i class="fas fa-chevron-right"></i></a>
        </div>
      </div>
      <div class="container-fluid men-product-block"></div>
      <div class="women-head">
        <h2>Women's Wear</h2>
        <div class="show-more" onclick="cl()">
          <a href="#">Show More <i class="fas fa-chevron-right"></i></a>
        </div>
      </div>
      <div class="container-fluid women-product-block"></div>
      <div class="kids-head">
        <h2>Kid's Wear</h2>
        <div class="show-more" onclick="cl()">
          <a href="#">Show More <i class="fas fa-chevron-right"></i></a>
        </div>
      </div>
      <div class="container-fluid kids-product-block"></div>
      <div class="mobiles-head">
        <h2>Mobile's</h2>
        <div class="show-more" onclick="cl()">
          <a href="#">Show More <i class="fas fa-chevron-right"></i></a>
        </div>
      </div>
      <div class="container-fluid mobiles-product-block"></div>
    </section>
    <!-- sample men's cloths -->
  </main>
  <!-- Footer of the site -->
  <footer class="container-fluid footer">
    <section class="container footer-block">
      <div class="footer-details-block">
        <ul>
          <p>Get to know</p>
          <li><a href="./assets/aboutus.html">About Us</a></li>
          <li><a href="./assets/careers.html">Careers</a></li>
          <li><a href="#">Press Releases</a></li>
          <li><a href="#">Amazon Cares</a></li>
          <li><a href="#">Gift a Smile</a></li>
        </ul>
        <ul>
          <p>HELP</p>
          <li><a href="#">Payments</a></li>
          <li><a href="#">Shipping</a></li>
          <li><a href="#">Cancellaton & Return</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Report</a></li>
        </ul>
        <ul>
          <p>POLICY</p>
          <li><a href="#">Return Policy</a></li>
          <li><a href="#">Terms Of Use</a></li>
          <li><a href="#">Security</a></li>
          <li><a href="#">Privacy</a></li>
          <li><a href="#">Sitemap</a></li>
          <li><a href="#">EPR Compliance</a></li>
        </ul>
        <ul>
          <p>SOCIAL</p>
          <li>
            <a href="#"><i class="fab fa-facebook"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-twitter"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-instagram"></i></a>
          </li>
          <li>
            <a href="#"><i class="fab fa-youtube-square"></i></a>
          </li>
        </ul>
        <ul>
          <p>Mail Us:</p>
          <li>Dot Store Internet Private Limited</li>
          <li>Buildings Alyssa, Begonia & Clove Embassy Tech Village,</li>
          <li>Outer Ring Road, Devarabeesanahalli Village,</li>
          <li>Benguluru,560103,</li>
          <li>Karnataka,INDIA</li>
        </ul>
        <ul>
          <p>Registered Office Address:</p>
          <li>Dot Store Internet Private Limited</li>
          <li>Buildings Alyssa, Begonia & Clove Embassy Tech Village,</li>
          <li>Outer Ring Road, Devarabeesanahalli Village,</li>
          <li>Benguluru,560103,</li>
          <li>Karnataka,INDIA</li>
          <li>CIN : U51109KA2012PTC066107</li>
          <li>Telephone: 1800 208 9898</li>
        </ul>
      </div>
    </section>
    <div class="cr">
      <p>&copy; www.dotstore.com</p>
    </div>
  </footer>
  <div class="main-pop">
    <div id="pop-up-block">
      <div class="pop-head">
        <h4 style="display: inline-block;">Message</h4>
        <span onclick="ml()">&times;</span>
      </div>
      <div class="pop-body">
        <p>
          Welcome! <br>
          Please login first, if you haven't an account, Please create an Account on Dot Store To See More products
        </p>
        <li><a href="./views/loginPage.html">Log in <i class="fas fa-user-plus"></i></a></li>
        <li><a href="./views/signUpPage.html">Sign Up <i class="fas fa-user-plus"></i></a></li>
      </div>
    </div>
  </div>
  <!--script files-->
  <script>
    document.querySelector(".menu-btn").addEventListener("click", () => {
      document.querySelector(".details-block").classList.toggle("show");
    });
    function cl() {
      var pop = document.querySelector("#pop-up-block");
      pop.style.display = "block";
      var covering = document.querySelector(".main-pop");
      covering.style.display = "block";

    }
    function ml() {
      var pop = document.querySelector("#pop-up-block");
      pop.style.display = "none";
      var covering = document.querySelector(".main-pop");
      covering.style.display = "none"
    }
  </script>
  <script src="./js/slideshow.js"></script>
  <script src="./js/menMainIteams.js"></script>
  <script src="./js/womenMainIteams.js"></script>
  <script src="./js/kidsMainIteams.js"></script>
  <script src="./js/mobileMainiteams.js"></script>
</body>

</html>

<script>
  console.log(
    /*
*                        _oo0oo_
*                       o8888888o
*                       88" . "88
*                       (| -_- |)
*                       0\  =  /0
*                     ___/`---'\___
*                   .' \\|     |// '.
*                  / \\|||  :  |||// \
*                 / _||||| -:- |||||- \
*                |   | \\\  - /// |   |
*                | \_|  ''\---/''  |_/ |
*                \  .-\__  '-'  ___/-. /
*              ___'. .'  /--.--\  `. .'___
*           ."" '<  `.___\_<|>_/___.' >' "".
*          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
*          \  \ `_.   \_ __\ /__ _/   .-` /  /
*      =====`-.____`.___ \_____/___.-`___.-'=====
*                        `=---='
*
*      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*            佛祖保佑       永不宕机     永无BUG
*/
  )
</script>